<template>
  <el-dialog
    v-if="bwx.show"
    title="绑定微信"
    :visible.sync="bwx.show"
    width="500px"
    :close-on-click-modal="false"
  >
    <user-info v-if="bwx.row" :userInfo="bwx.row" />
    <template v-if="bwx.row">
      <el-form label-width="100px" class="exhibition-from">
        <el-form-item
          v-if="bwx.row.wechatOpenid != '0' && bwx.row.wechatOpenid != null"
          label="已绑定微信"
        >
          {{ bwx.row.wechatNickName }}
          <el-button
            type="danger"
            @click="unbind()"
            size="mini"
            style="float: right;"
          >
            解除绑定
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <div class="qrcode">
      <PicViewer ref="qrcode" :value="bwx.url" qrcode>
        <template v-slot="{ src }">
          <img :src="src" />
        </template>
      </PicViewer>
      <h3 style="text-align: center">请使用微信扫描二维码后绑定</h3>
    </div>
  </el-dialog>
</template>
<script>
import userInfo from './user-info.vue'
export default {
  name: 'bind-wx',
  components: {
    userInfo
  },
  data () {
    return {
      bwx: {
        show: false,
        url: '',
        row: {}
      }
    }
  },
  watch: {
    'bwx.show' (n) {
      if (!n) {
        this.$parent.getList()
      }
    }
  },
  methods: {
    getWxTicketid (row) {
      if (row) {
        this.bwx.row = row
        this.$POST('sot-admin-api/sys/bind/refreshScanUrl', {
          userId: row.userId
        }).then(res => {
          if (res.errorCode == '00000') {
            this.bwx.show = true
            this.bwx.url = res.data.url + '&bindType=bind'
            this.bwx.ticketId = res.data.ticketId
            this.bwx.ticket = res.data.ticket
            this.scanCheckBind()
          } else {
            this.$swal.error(res.message)
          }
        })
      }
    },
    // 查询是否已经绑定
    scanCheckBind () {
      this.$POST('sot-admin-api/sys/bind/scanCheckBind', {
        ticketId: this.bwx.ticketId,
        ticket: this.bwx.ticket
      }).then(res => {
        if (res.errorCode == '00000') {
          // status 0 等待绑定， 1 已绑定 ， 2已失效
          if (this.bwx.show && res.data.status === 0) {
            setTimeout(() => {
              this.scanCheckBind() // 循环看是否已绑定
            }, 1000)
          }
          if (this.bwx.show && res.data.status === 1) {
            this.$swal.success('绑定成功')
            this.bwx.show = false
          }
          if (this.bwx.show && res.data.status === 2) {
            this.$swal.error('二维码已失效')
            this.bwx.show = false
          }
        } else {
          this.$swal.error(res.message)
        }
      })
    },
    // 查询是否已经绑定
    unbind () {
      this.$confirm('是否确认解除绑定?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$POST('sot-admin-api/sys/bind/wechatUnbind', {
          userId: this.bwx.row.userId
        }).then(res => {
          if (res.errorCode == '00000') {
            this.$swal.success('提交成功')
            this.bwx.show = false
          } else {
            this.$swal.error(res.message)
          }
        })
      })
    }
  },
  destroyed () {
    this.bwx.show = false
  }
}
</script>
<style lang="scss" scoped>
.qrcode {
  width: 250px;
  margin: 20px auto;
}
.bound {
  text-align: center;
}
</style>
